<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="text"></div>
</body>
</html>

<script>
    //document.createElement() 方法用来生成元素节点，并返回该节点
    var div = document.createElement('div')
    //document.createTextNode() 方法用来生成文本节点，并返回该节点
    var text = document.createTextNode('123')
    //appendChild() 方法将一个节点添加到指定节点的子节点列表的末尾
    div.appendChild(text) // 用于添加子节点
    var id = document.createAttribute('id') //创建属性节点
    id.value = 'one' //设置属性节点的属性值
    div.setAttributeNode(id)//设置属性节点
    var divs = document.getElementsByClassName('text')[0]
    console.log(divs)
    divs.appendChild(div)
    
</script>